<template>
    <div class="lx-index-page">
        <div class="lx-index-main-content">
            <AppMainCenter>
                <template #lxMainleft>
                    <ul class="lx-article-list">
                         <ArticleItem v-for="(articleItem,articleIndex) in articleList" :article="articleItem"></ArticleItem>            
                    </ul>
                </template>
                <template #lxMainright>
                    <div class="lx-right-info">
                        right
                    </div>
                </template>
            </AppMainCenter>
        </div>
        <AppFooter></AppFooter>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { getArticleList } from '@/request/articles'
import { message } from 'ant-design-vue';



let articleList = ref<articleItem[]>([])

// 获取列表
let res:lxHttpResponse = await getArticleList()
console.log('res',res);

if(res.code !== 200)  message.error(res.message)
articleList.value = res.articles

console.log('获取到的博文列表',articleList.value);


</script>

<style lang="scss" scoped>
.lx-index-page {
    background-color: var(--lx-page-color);
    .lx-index-main-content {
        width: 100%;
        margin: var(--lx-margin-5) auto;
    }
    .lx-article-list {
        // padding: var(--lx-padding-5);
        width: 100%;
        background-color: var(--lx-page-bg-color);
    }
}
</style>